<template>
  <div class="content">
      <!-- 头部 -->
      <div class="box-festival-head">
           <a-breadcrumb class="breadcrumb">
                <a-breadcrumb-item>
                    <a href="../main">首页</a>
                </a-breadcrumb-item>
                <a-breadcrumb-item>系统配置</a-breadcrumb-item>
                <a-breadcrumb-item>节假日</a-breadcrumb-item>
            </a-breadcrumb>
            <a-button @click="saveCalendar" :loading="saveLoading">保存</a-button>
      </div>
      <!-- 内容 -->
      <div class="box-festival-content">
        <div class="box-festival-year">
            <a-icon type="left" @click="minusYear"/>
            <input class="input" disabled v-model="year" />
            <a-icon type="right" @click="addYear"/>
        </div>

        <!-- 日历内容 -->
        <template v-for="(month, index) in date">
            <table class="box-calendar-table" :key="index" border="1">
                <!-- 头 -->
                <tr class="title">
                    <td colspan="7">{{index + 1}}月</td>
                </tr>
                <!-- tab -->
                <tr class="head">
                    <td>日</td>
                    <td>一</td>
                    <td>二</td>
                    <td>三</td>
                    <td>四</td>
                    <td>五</td>
                    <td>六</td>
                </tr>
                <template v-for="(week, wkey) in month">
                    <tr class="content" :key="wkey">
                        <template v-for="(item, dkey) in week">
                            <td :key="dkey" :style="getDayStyle(item)" @click="dayTap(item)">{{ (item && item.day) || ''}}</td>
                        </template>
                    </tr>
                </template>
            </table>
        </template>
      </div>
  </div>
</template>

<script>
    import ChargeSettingApi from "../../api/system/ChargeSettingApi";
    export default {
        name: "FestivalSetting",
        components: {  },
        data() {
            return {
                year: 0,
                date: [],
                saveLoading: false,
            };
        },

        methods: {           
            /* ---------------- 生成日历 ----------------- */
            createYearCalendar(year) {
                let date = [];
                for(let i = 0; i < 12; i++) {
                    /* -------- 初始化数组 -------- */
                    date[i] = this.getInitMonthArray();
                    /* 周循环 */
                    let offset = new Date(year, i, 1).getDay();
                    let len = this.getMaxDay(year, i + 1); 
                    for(let d = 0; d < len; d++) {
                        date[i][Math.floor((d + offset) / 7)][(d + offset) % 7] = {
                            day: d + 1,
                            select: false,
                        }
                    }

                }
                this.date = date;
            },
            getInitMonthArray() {
                return [
                    [{}, {}, {}, {}, {}, {}, {}],
                    [{}, {}, {}, {}, {}, {}, {}],
                    [{}, {}, {}, {}, {}, {}, {}],
                    [{}, {}, {}, {}, {}, {}, {}],
                    [{}, {}, {}, {}, {}, {}, {}],
                    [{}, {}, {}, {}, {}, {}, {}],
                ];
            },

            getMaxDay(year, month) {
                switch(month) {
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                    case 8:
                    case 10:
                    case 12:
                        return 31;
                    case 4:
                    case 6:
                    case 9:
                    case 11:
                        return 30;
                    case 2:
                        return (year % 400 === 0 || ( year % 4 === 0 && year % 100 != 0)) ? 29 : 28;
                }
            },

            dayTap(item) {
                item.select = !item.select;
            },

            /* ------------------ 日历切换 ------------------ */
            loadYear(year) {                
                ChargeSettingApi.queryHoliday({ year})
                    .then((data) => {
                        this.createYearCalendar(year);
                        this.dealNetworkData(data.data);
                    })
                    .catch(() => {
                        this.$message.error("加载失败");
                    })
            },

            dealNetworkData(data) {
                /* 月份 map-List */
                for(let i = 1; i <= 12; i++) {
                    let array = data[`${i}`];
                    if(!array || array.length == 0) continue;
                    for(let j=0;j<array.length;j++) {
                        let day = array[j].time;
                        this.maskSelect(i, day);
                    }
                }
            },

            maskSelect(month, day) {
                let date = this.date;
                let week = date[month-1];
                for(let i=0;i<6;i++) {
                    for(let j=0;j<7;j++) {
                        let item = week[i][j];
                        if(item && item.day == day) {
                            item.select = true;
                            return ;
                        }
                    }
                }
            },

            minusYear() {
                this.loadYear(--this.year);
            },

            addYear() {
                this.loadYear(++this.year);
            },

            /* ------------------ 保存日历 ------------------ */
            saveCalendar() {
                this.saveLoading = true;
                ChargeSettingApi.updateHoliday(JSON.stringify({ model: this.getSaveDate(), year: this.year }))
                    .then(() => {
                        this.saveLoading = false;
                        this.$message.success("保存成功");
                    })
                    .catch(() => {
                        this.saveLoading = false;
                        this.$message.error("保存失败");
                    })               
            },

            getSaveDate() {
                let date = this.date;
                let result = []
                /* 月 */
                for(let i=0;i<12;i++) {
                    /* 每周遍历 */
                    for(let w=0;w<6;w++) {
                        /* 每天 */
                        for(let d=0;d<7;d++) {
                            let item = date[i][w][d];
                            if(!item.day || !item.select) continue;
                            result.push({
                                dateStr :this.year + "-" + (i+1) + "-" + item.day,
                                month: i + 1,
                                year: this.year
                            });
                        }
                    }
                }
                return result;
            },
        },

        computed: {
            getDayStyle() {
                return function(item) {
                    let style = "";
                    if(item.day) style += "cursor: pointer;";
                    if(item.select) style += "color: #ff6c60; font-weight: bold;";
                    return style;
                }
            }
        },

        mounted() {
            this.loadYear(this.year = new Date().getFullYear());
        }
    }
</script>

<style scoped>
/* 表单 */
.box-calendar-table {
    border-color: grey;
    box-shadow: 0 0 1px 0px #cfcfcf;
    width: 210px;
    margin: 40px 40px 0 0;
}

.box-calendar-table .title {
    font-weight: bold;
    text-align: center;
    color: #6f6d70;
    font-size: 12px;
}

.box-calendar-table td {
    background: white;
}

.box-calendar-table .title td {
    width: 30px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
}

.box-calendar-table .head {
}

.box-calendar-table .head td {
    width: 30px;
    text-align: center;
    line-height: 28px;
    color: #6f6d70;
    font-weight: bold;
    font-size: 12px;
}

.box-calendar-table .content {
}

.box-calendar-table .content td {
    width: 30px;
    text-align: center;
    line-height: 28px;
    color: #6f6d70;
    font-size: 12px;
}

/* 节假日 */
.box-festival-content {
    margin-top: 10px;
    padding: 40px 0 40px 40px;
    display: flex;
    flex-wrap: wrap;
    background: white;
}

.box-festival-head {
    padding: 20px;
    background: white;
    /* flex */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box-festival-year {
    width: 100%;
    height: 30px;
    /* flex */
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-festival-year .icon-left {
    width: 12px;
    height: 17px;
    background: cyan;
    cursor: pointer;
}

.box-festival-year .input {    
    display: inline-block;
    width: 105px;
    text-align: center;
    margin: 0 10px;
    border-radius: 5px;
    border: solid 1px #CCC;
    background: #fff;
    /* text */
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    color: #555555;
}

.box-festival-year .icon-right {
    width: 12px;
    height: 17px;
    background: cyan;
    cursor: pointer;
}
</style>
